<template>
    <div :class="`tech-order-coupon ${mode}`">
        <div class="coupon-item__base" :style="fontColor">
            <div class="coupon-item__value">{{ couponInfo.value / (couponInfo.isDiscount ? 10 : 100) }}<span>{{ couponInfo.isDiscount ? '折' : '元' }}</span></div>
            <div class="coupon-item__desc">{{ couponInfo.valueTip }}</div>
        </div>
        <div class="coupon-item__line">
            <div class="item-line__top"></div>
            <div class="item-line__bottom"></div>
        </div>
        <div class="coupon-item__detail">
            <div class="coupon-item__title title-color">{{ couponInfo.name }}</div>
            <div class="coupon-item__date">{{ couponInfo.useDateString }}</div>
        </div>
    </div>
</template>

<script>
import { Button } from 'vant';
import ModeMixin from '@common/mixin';
import { TipError, TipSuccess } from '@common/tip';
export default {
    name: 'OrderCoupon', // 优惠券
    mixins: [ModeMixin],
    components: {
        Button,
    },
    props: {
        couponInfo: {
            type: Object,
            default() {
                return {};
            },
        },
    },
};
</script>

<style lang="less">
.tech-order-coupon {
    height: 90px;
    border: 1px solid rgba(125,125,131,0.20);
    border-radius: 9px;
    .flex-row-between();
    .p-r(@gap-md);
    .coupon-item__base {
        width: 108px;
        .flex-column-center();
        .coupon-item__value {
            font-size: 28px;
            font-family: @font-family-number;
            > span {
                font-size: @font-size-sm;
            }
        }
        .coupon-item__desc {
            font-size: @shop-font-size-sm;
        }
    }
    .coupon-item__line {
        border-right: 1px dashed rgba(125, 125, 131, 0.2);
        height: 100%;
        position: relative;
        .item-line__top,
        .item-line__bottom {
            position: absolute;
            display: block;
            left: -6px;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background-color: #FFFFFF;
        }
        .item-line__top {
            top: -6px;
            border-left: 1px solid rgba(125,125,131,0.20);
            border-bottom: 1px solid rgba(125,125,131,0.20);
            transform: rotate(-45deg);
        }

        .item-line__bottom {
            bottom: -6px;
            border-left: 1px solid rgba(125,125,131,0.20);
            border-top: 1px solid rgba(125,125,131,0.20);
            transform: rotate(45deg);
        }
    }
    .coupon-item__detail {
        .flex-column();
        justify-content: center;
        flex: 1;
        .m-l(@gap-md);
        .coupon-item__title {
            .font-size-md();
            font-weight: @font-weight-bold;
            .m-b(@gap-sm);
        }
        .coupon-item__date {
            font-size: @shop-font-size-sm;
            color: @tip-color;
        }
    }
    .coupon-item__action {
        .flex-center();
    }
}
</style>
